<template>
  <div id="head-menu">
    <div class="yh-layout-box">
      <div class="menu-logo">
        <img class="yh-middle" src="@/assets/images/meal/logo.png" @click="routeToPath('/', 'new')">
        <img class="menu-line" src="@/assets/images/help/help_10.png">
        <div class="menu-title">{{ title }}</div>
      </div>


      <div class="menu-search" v-if="!showSearchBar">
        <div class="search-select">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{searchActive}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(i, idx) in searchList" :command="i.value" :key="idx">{{ i.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="search-input">
          <input type="text" name="" placeholder="请输入商品或品牌名称" v-model="searchKW" @keyup.enter="submitSearch">
        </div>
        <div class="search-btn" @click="submitSearch">
          <img class="yh-middle" src="@/assets/images/layouts/headMenu/search.png">
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: ['ideName', 'kw', 'pageFrom', 'title', 'showSearchBar'],
  data() {
    return {
      searchList: [{
        label: '商品',
        value: 'goods',
      },{
        label: '云工厂',
        value: 'factory',
      }],
      searchActive: null,
      searchKW: null,
    }
  },
  created() {
    this.searchActive = this.searchList[0].label;
    this.searchKW=this.kw;
  },
  methods: {
    handleCommand(e) {
      for (var index in this.searchList) {
        if (this.searchList[index].value == e) {
          this.searchActive = this.searchList[index].label
        }
      }
    },
    submitSearch(){
      if(!this.searchKW && this.searchActive == '商品' && this.pageFrom != 'product') {
        return false;
      }
      if (this.searchActive == '商品') {
        this.routeToOut('/mallplus/search/product?kw=' + this.searchKW)
      } else {
        this.routeToOut('/mallplus/search/shop?kw=' + this.searchKW)
      }
    }
  }
}
</script>

<style scoped lang="scss">
#head-menu{
  overflow: hidden;
  background-color: #FFF;
  padding-top: 16px;
  min-width: 1200px;
  padding-bottom: 19px;
  .menu-logo{
    float: left;
    img{
      cursor: pointer;
    }
  }
  .menu-list{
    float: left;
    margin-left: 92px;
    li{
      float: left;
      margin-right: 35px;
      font-size: 16px;
      line-height: 50px;
      cursor: pointer;
    }
    .active{
      color: #255B8A;
      font-weight: 600;
    }
  }
  .menu-search{
    float: right;
    margin-top: 10px;
    & > div {
      float: left;
    }
    .search-select{
      background-color: #F0F0F0;
      height: 36px;
      line-height: 36px;
      border-radius: 15px 0 0 0;
      padding-left: 20px;
      padding-right: 10px;

      cursor: pointer;
      .el-dropdown-link{
        font-size: 12px;
      }
    }
    .search-input{
      input{
        background-color: #F0F0F0;
        width: 280px;
        padding: 0 10px;
        height: 36px;
        border: 0;
        font-size: 12px;
      }
    }
  }
  .menu-line{
    margin: 0 20px;
    vertical-align: top;
  }
  .menu-title{
    display: inline-block;
    font-size: 18px;
    // border-left: 1px solid #eee;
    line-height: 50px;
    // margin-left: 21px;
    // padding-left: 21px;
    vertical-align: top;
  }
}
</style>
